https://github.com/delan/wbe.rs/commit/5f66fb35086e5ad5980cb35c67d09e4eaf7072fa

i’ve been reading the excellent Web Browser Engineering and following along in rust. you can too! the whole book is free online!

so far i’ve done a rudimentary html parser, dom tree, layout tree, and paint, with only ~2000 lines of code. now i’m working on a toy css engine.

https://github.com/delan/wbe.rs

this counts as css crimes right? ^.^;;

https://www.youtube.com/watch?v=qWTHxQWUreo

live demo (chromium-based browsers only for now)

[view source]

cohost only supports inline styles, hence the need for tooling like prechoster, but code reuse is still possible thanks to the ‘all’ and ‘display’ properties. this can make hand-writing chosts easier, and it could potentially even help reduce the size of generated chosts? here’s how:

1. wrap related elements in <div style="/* common */; display: contents;">
2. move their common styles to /* common */ in that wrapper element
3. prepend all: inherit; display: /* something */; to each of their styles

these wrappers can be nested, though for inner wrappers you can use <div style="all: inherit; /* common */"> to save a few characters. for example:

<div style="position: relative; height: 8em;">
    <div style="width: 2em; height: 2em; position: absolute; justify-content: center; color: #fff9f2; background: #83254f; display: contents;">
        <div style="all: inherit; display: flex; inset: 1em 0 0 1em;">e</div>
        <div style="all: inherit; display: flex; inset: 3em 0 0 3em;">g</div>
        <div style="all: inherit; display: flex; inset: 5em 0 0 5em;">g</div>
        <div style="all: inherit; background: #e56b6f;">
            <div style="all: inherit; display: flex; inset: 1em 0 0 4em;">b</div>
            <div style="all: inherit; display: flex; inset: 3em 0 0 6em;">u</div>
            <div style="all: inherit; display: flex; inset: 5em 0 0 8em;">g</div>
        </div>
    </div>
</div>

(see also: github testing that i did for my profile readme)

• content is contained to post area with overflow:hidden

supported

• div, span, a
• big, small, sup, sub
• table, tr, td
• input (forced type=checkbox disabled)
• details, summary
• @id (forced prepend “user-content-”)
• @style
• ‘background-image’ with ‘url()’
• ‘all’ (e.g. all: inherit;)
• ‘var(--custom)’

stripped (into its textContent if any)

• <!-- comment -->
• a@href starting with “javascript:”
• img@src
• font
• fieldset, legend
• label, button, textarea, meter, progress
• style
• @class
• ‘font-smooth’
• ‘--custom’